<template>
  <div>
    <div v-if="this.canSee">
      <top-info-common :data=this.staticData></top-info-common>
      <div v-if="this.fixTeamList.length === 0">
        <van-empty v-if="hasLoadData" description="没有数据"/>
        <van-loading v-else size="24px" vertical>加载中...</van-loading>
      </div>
      <van-list v-else
                v-model="helper.loading"
                :offset="helper.offset"
                :finished="helper.finished"
                :finished-text="'已经到底了'"
                @load="fetchData(false)">
        <item-view-common :list="this.fixTeamList"></item-view-common>
      </van-list>
    </div>
    <div v-else>
      <empty-page-common :info="this.errorInfo"></empty-page-common>
    </div>
  </div>
</template>

<script>
  import TeamAPI from '@/repo/api/TeamAPI'
  import LoadingView from '@/components/LoadingView'
  import {Toast} from "vant";
  import UniversityTool from "../UniversityTool";
  import PagedHelper from "../../../utils/helpers/paged-helper";
  import topInfoCommon from "./components/topInfoCommon";
  import itemViewCommon from "./components/itemViewCommon";
  import emptyPageCommon from "../../../components/emptyPageCommon";
  export default {
    name: "certChartsTeam",
    data() {
      return {
        staticData: {
          title: '证书排行榜',
          description: '该表统计门店下用户获得证书总数排行',
          rank: '排名',
          leftAttribute: '门店',
          rightAttribute: '证书数量',
        },
        teamId: this.$route.params.teamId,
        teamData: {},
        enterpriseData: {},
        teamList: {},
        helper: new PagedHelper(),
        hasLoadData: false,
        enterpriseIds: [],
        errorInfo: '没有权限',
      }
    },
    components: {
      LoadingView,
      topInfoCommon,
      itemViewCommon,
      emptyPageCommon
    },
    computed: {
      canSee(){
        if (this.teamId == this.$store.getters.enterpriseInfo.enterprise.id && this.$store.getters.enterpriseRoleInfo.roleType == 2) {
          return true
        }
        return false
      },
      //组装成员列表数据
      fixTeamList() {
        let list = []
        for (let idx in this.teamList) {
          let enterprise = this.teamList[idx];
          let dataEnterprise = this.enterpriseData[enterprise.enterpriseId] || {};
          enterprise.enterpriseName = dataEnterprise.enterpriseName;
          enterprise.pic = dataEnterprise.pic;
          list.push(enterprise)
        }

        return list
      }
    },
    mounted() {
    },
    created() {
      this.getTeamData()
    },
    methods: {

      getTeamData() {

        TeamAPI.getTeamInfo(this.teamId).then((res) => {
          this.teamData = res.responseData.enterprise
          Toast.clear()
          if (!this.canSee) {
            Toast('没有权限查看');
            return
          }
          this.fetchData(true)
        }).catch((error) => {
          Toast.clear()
        })


      },
      fetchData(isRefresh) {
        this.helper.initBeforeLoad(isRefresh);

        let page = this.helper.param();

        console.log(page);
        TeamAPI.certCntListTeam(this.teamId,page,20).then((res) => {
          //课程排行榜
          this.helper.onBizSuccess(res);

          if (res.responseData.list.length !== 0) {
            if (isRefresh) {
              this.teamList = res.responseData.list;
              console.log('123', this.teamList)
            } else {
              this.teamList.push(...res.responseData.list);
              console.log('456', this.teamList)
            }

            /*let enterpriseIds = this.enterpriseIds;*/
            res.responseData.list.forEach((t) => {
              this.enterpriseIds.push(t.enterpriseId)
            });
            UniversityTool.getEnterpriseInfoMapByIds(this.enterpriseIds).then((enterprise) => {
              console.log(enterprise,'enterprise')
              this.enterpriseData = enterprise;
              console.log('enterpriseData', this.enterpriseData)
            })
          }
        })
          .finally(() => {
            this.hasLoadData = true;
            this.helper.onFinally()
          })

      },
    },

  }
</script>

<style scoped>

</style>
